---
title: Animated Beam
date: 2024-02-11
description: An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
author: dillionverma
published: true
video: https://cdn.magicui.design/animated-beam.mp4
---

<ComponentPreview name="animated-beam-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/animated-beam
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-beam" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Animated Beam Uni-Directional

<ComponentPreview name="animated-beam-unidirectional" />

### Animated Beam Bi-Directional

<ComponentPreview name="animated-beam-bidirectional" />

### Animated Beam Multiple Inputs

<ComponentPreview name="animated-beam-multiple-inputs" />

### Animated Beam Multiple Outputs

<ComponentPreview name="animated-beam-multiple-outputs" />

## Usage

```tsx showLineNumbers
import { AnimatedBeam } from "@/components/ui/animated-beam"
```

```tsx showLineNumbers
<AnimatedBeam containerRef={containerRef} fromRef={fromRef} toRef={toRef} />
```

## Props

### Animated Beam

| Prop                 | Type      | Default   | Description                                              |
| -------------------- | --------- | --------- | -------------------------------------------------------- |
| `className`          | `string`  | `-`       | The class name for the component.                        |
| `containerRef`       | `ref`     | `-`       | The container ref.                                       |
| `fromRef`            | `ref`     | `-`       | The ref of the element from which the beam should start. |
| `toRef`              | `ref`     | `-`       | The ref of the element to which the beam should end.     |
| `curvature`          | `number`  | `0`       | The curvature of the beam.                               |
| `reverse`            | `boolean` | `false`   | Whether the beam should be reversed.                     |
| `duration`           | `number`  | `5`       | The duration of the beam.                                |
| `delay`              | `number`  | `0`       | The delay of the beam.                                   |
| `pathColor`          | `string`  | `gray`    | The color of the beam.                                   |
| `pathWidth`          | `number`  | `2`       | The width of the beam.                                   |
| `pathOpacity`        | `number`  | `0.2`     | The opacity of the beam.                                 |
| `gradientStartColor` | `string`  | `#ffaa40` | The start color of the gradient.                         |
| `gradientStopColor`  | `string`  | `#9c40ff` | The stop color of the gradient.                          |
| `startXOffset`       | `number`  | `0`       | The start x offset of the beam.                          |
| `startYOffset`       | `number`  | `0`       | The start y offset of the beam.                          |
| `endXOffset`         | `number`  | `0`       | The end x offset of the beam.                            |
| `endYOffset`         | `number`  | `0`       | The end y offset of the beam.                            |

## Credits

- Credit to [@itsarghyadas](https://twitter.com/itsarghyadas) for figuring out the foundation of this!
